// 获取背景图片元素
const bg = document.querySelector('.bg');
// 获取loading_text
const loading = document.querySelector('.loading_text');
// loading_text
let loading_text = 0;
// 设置定时器,每30毫秒递增
let timer = setInterval(loadAdd, 30);

function loadAdd() {
  loading_text++;
  if (loading_text > 99) {
    clearInterval(timer);
  }
  // 文字的透明度逐渐变淡 0-1
  loading.style.opacity = scale(loading_text, 0, 100, 1, 0);
  // 图片的清晰度逐渐变清晰 30-0
  bg.style.filter = `blur(${scale(loading_text, 0, 100, 30, 0)}px)`;
  // 更改文本信息,利用es6的模板字符串
  loading.innerHTML = `${loading_text}%`;
}

/*
  计算比例的函数
  @num：当前值
  @in_min: 当前变化频率的最小值
  @in_max: 当前变化频率的最大值
  @out_min: 当前属性对应变化的最小值
  @out_max: 当前属性对应变化的最最大值
*/
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};
